iT邦幫忙

2024 iThome 鐵人賽
DAY 16
0
自我挑戰組

asp.net可以變出那些功能系列 第 16 篇

權限設定:註冊

16th鐵人賽
155 瀏覽

  • 分享至 

  • xImage
    •  

這裡是我覺得建網站會卡的坎之一
權限設定如果是內部網站用，就是分登入後可以看到不同的顯示

外部網站用就是會員系統登入是留言板，後面可能寫到，敬請期待~

回到權限設定:註冊/權限設定:登入都是完整的走完以下的流程~

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

先說”權限設定:註冊”再說”權限設定:登入”在操作流程上面比較順~

權限設定:註冊
https://laihao2.com/Home/Register

https://ithelp.ithome.com.tw/upload/images/20240923/20119035MqZWRpR3k8.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>

USE [ProductDB]
GO

/****** Object:  Table [dbo].[tMember]    Script Date: 2024/9/19 下午 10:33:07 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tMember](
	[fId] [int] IDENTITY(1,1) NOT NULL,
	[fUserId] [nvarchar](50) NOT NULL,
	[fPwd] [nvarchar](50) NOT NULL,
	[fName] [nvarchar](50) NOT NULL,
	[fEmail] [nvarchar](50) NOT NULL,
	[UpdateRight] [nvarchar](1) NULL,
 CONSTRAINT [PK_tMember] PRIMARY KEY CLUSTERED 
(
	[fId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

https://ithelp.ithome.com.tw/upload/images/20240923/201190355Pxm0ldErH.png

解釋sql程式碼
這段 SQL 腳本用於在名為 ProductDB 的資料庫中建立一個名為 tMember 的表格。這裡是每個部分的詳細說明：

1. 基本設定

SET ANSI_NULLS ON
SET QUOTED_IDENTIFIER ON
  • SET ANSI_NULLS ON：這指示 SQL Server 如何處理 NULL 值的比較。當這個設置為 ON 時，當與 NULL 值進行比較時，= NULL 將不會返回結果，必須使用 IS NULL。
  • SET QUOTED_IDENTIFIER ON：這允許使用雙引號來識別對象名稱（如表格和列名），而不是字串文字。

2. 建立資料表 tMember

CREATE TABLE [dbo].[tMember](
    [fId] [int] IDENTITY(1,1) NOT NULL,
      NOT NULL,
      NOT NULL,
      NOT NULL,
      NOT NULL,
      NULL,
 CONSTRAINT [PK_tMember] PRIMARY KEY CLUSTERED 
(
    [fId] ASC
)
  • 資料表名稱：[dbo].[tMember] 表示該表位於 dbo 架構下，名稱為 tMember。
  • 列定義：
    • [fId] [int] IDENTITY(1,1) NOT NULL：這是自動遞增的整數型主鍵列，IDENTITY(1,1) 表示從 1 開始，每次插入資料時自動增加 1。此列不允許 NULL 值。
    • NOT NULL：這是一個長度最多為 50 的 nvarchar 字串，用來儲存用戶的帳號，且此列不允許 NULL。
    • NOT NULL：用來儲存用戶密碼的 nvarchar 字串，長度上限為 50，且不允許 NULL。
    • NOT NULL：用來儲存用戶姓名，長度最多 50，且不允許 NULL。
    • NOT NULL：用來儲存用戶的電子郵件地址，長度最多 50，且不允許 NULL。
    • NULL：這列表示用戶的更新權限，允許 NULL 值，且最大長度為 1。

3. 主鍵約束

CONSTRAINT [PK_tMember] PRIMARY KEY CLUSTERED 
(
    [fId] ASC
)
  • 主鍵約束：[PK_tMember] 定義了主鍵約束，主鍵是 fId 列，它將確保每個記錄都有一個唯一的 fId。CLUSTERED 表示主鍵的索引將按照 fId 進行排序。

4. 索引設置

WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]

這段是為主鍵索引設定參數：

  • PAD_INDEX = OFF：索引填充因子為預設值，表示索引頁面中的空間不會額外填充。
  • STATISTICS_NORECOMPUTE = OFF：統計資料將在需要時自動更新。
  • IGNORE_DUP_KEY = OFF：當插入重複鍵值時，會報錯而不是忽略。
  • ALLOW_ROW_LOCKS = ON 和 ALLOW_PAGE_LOCKS = ON：允許對索引中的行和頁面進行鎖定，以提高並發性能。
  • OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF：這與高並發插入有關，OFF 表示不啟用此優化。

資料表和主鍵索引都建立在 PRIMARY 檔案群組上。

總結：這段 SQL 建立了一個名為 tMember 的資料表，用於儲存會員資料，包括會員的 ID、帳號、密碼、姓名、電子郵件和更新權限。主鍵是 fId，並為這個表設置了一些索引參數。

注意:識別規則選”是”表示自動遞增

產生Models裡面類別檔dao叫 tMember.cs>按:建置>
這裡可以參考前面幾天~有一步一步講解

解釋程式碼
這段程式碼是用於 ASP.NET MVC 專案中的一個模型類別，代表資料庫中的 tMember 資料表，並使用了 Entity Framework 來進行資料庫操作。這裡是各部分的詳細解釋：

1. 命名空間與引用

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
    using System.ComponentModel;
  • 命名空間 WebApplication5.Models：此類別屬於 WebApplication5 專案的 Models 命名空間，模型類別通常在這個命名空間中定義。
  • 引用的命名空間：
    • System.ComponentModel.DataAnnotations：這個命名空間提供了屬性（Attributes）用於對模型的屬性進行驗證，如 Required、StringLength 等。
    • System.ComponentModel.DataAnnotations.Schema：提供了資料庫映射的功能，如 Table 和 Key 屬性。
    • System.ComponentModel：提供 DisplayName 等屬性來控制欄位在 UI 上的顯示名稱。

2. 類別定義

[Table("tMember")]
public partial class tMember
  • [Table("tMember")]：這個屬性告訴 Entity Framework，這個類別對應到資料庫中的 tMember 表格。
  • public partial class tMember：這是一個部分類別（partial），允許類別的其他部分定義在其他檔案中。

3. 欄位定義

[Key]
public int fId { get; set; }
  • [Key]：這個屬性將 fId 定義為資料表的主鍵，對應到 tMember 資料表的 fId 列。
  • public int fId { get; set; }：fId 是整數型的自增列。
[DisplayName("帳號")]
[Required]
[StringLength(50)]
public string fUserId { get; set; }
  • [DisplayName("帳號")]：這個屬性指定在前端顯示該欄位時的名稱為「帳號」。
  • [Required]：表示這個欄位必須填寫，不能為 null 或空值。
  • [StringLength(50)]：限制 fUserId 的最大長度為 50 字符，對應資料庫中 nvarchar(50) 的定義。
  • public string fUserId { get; set; }：用來儲存用戶帳號的屬性，型別是字串。
[DisplayName("密碼")]
[Required]
[StringLength(50)]
public string fPwd { get; set; }
  • [DisplayName("密碼")]：前端顯示名稱為「密碼」。
  • [Required] 和 [StringLength(50)]：表示密碼為必填，且長度不能超過 50 個字符。
  • public string fPwd { get; set; }：用來儲存用戶密碼的屬性。
[DisplayName("姓名")]
[Required]
[StringLength(50)]
public string fName { get; set; }
  • [DisplayName("姓名")]：顯示名稱為「姓名」。
  • [Required] 和 [StringLength(50)]：表示姓名欄位必填且長度不能超過 50 字符。
  • public string fName { get; set; }：用來儲存用戶的姓名。
[DisplayName("信箱")]
[Required]
[EmailAddress]
[StringLength(50)]
public string fEmail { get; set; }
  • [DisplayName("信箱")]：顯示名稱為「信箱」。
  • [Required]：表示信箱欄位為必填項。
  • [EmailAddress]：這個屬性表示該欄位必須符合電子郵件格式。
  • [StringLength(50)]：限制信箱最大長度為 50 字符。
  • public string fEmail { get; set; }：用來儲存用戶的電子郵件地址。
[StringLength(1)]
public string UpdateRight { get; set; }
  • [StringLength(1)]：限制此欄位的長度為 1 個字符。
  • public string UpdateRight { get; set; }：用來儲存用戶是否擁有更新權限的欄位。這個欄位是可選的，因為沒有加上 Required 屬性。

總結

這個 tMember 類別是一個對應資料庫表 tMember 的模型類別。它定義了會員資料表的結構，包含欄位 fId、fUserId、fPwd、fName、fEmail 和 UpdateRight，並通過屬性來對這些欄位進行驗證和描述。例如，帳號、密碼、姓名和信箱都是必填項，且信箱必須符合電子郵件格式。

要注意在ProductDBContext.cs裡面也有相關程式設定,
這裡就把這個下拉選單會用到相關資料表設定都一起寫上，
後面如果有用到就參考這篇
https://ithelp.ithome.com.tw/upload/images/20240923/20119035VtEA9XIJWC.png

ProductDBContext程式碼

using System;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity;
using System.Linq;

namespace WebApplication5.Models
{
    public partial class ProductDBContext : DbContext
    {
        public ProductDBContext()
            : base("name=ProductDBContext")
        {
        }

        public virtual DbSet<Product> Products { get; set; }
        //20240716增加:冷媒欄位
        public virtual DbSet<ColdCoal> ColdCoal { get; set; }
        //20240716增加:滅火器欄位
        public virtual DbSet<FireExtin> FireExtin { get; set; }

        //20240716增加:車輛用油欄位
        public virtual DbSet<VEHICLE_OIL> VEHICLE_OIL { get; set; }

        public virtual DbSet<ELECTRICITY_BILL> ELECTRICITY_BILL { get; set; }

        public virtual DbSet<tMember> tMember { get; set; }

        public virtual DbSet<GHG_MST_COMMUTE> GHG_MST_COMMUTE { get; set; }

        public virtual DbSet<CAT_THREE_EMPLOYEE_COMMUTING> CAT_THREE_EMPLOYEE_COMMUTING { get; set; }

        public virtual DbSet<BRM_MST_EMISSION_FACTOR> BRM_MST_EMISSION_FACTOR { get; set; }

        public virtual DbSet<TRIP_APPLICATION> TRIP_APPLICATION { get; set; }
        public virtual DbSet<TAXI_APPLICATION> TAXI_APPLICATION { get; set; }

        public virtual DbSet<HIGH_SPEED_RAIL> HIGH_SPEED_RAIL { get; set; }

        public virtual DbSet<EMPLOYEE_TRAVEL_ABROAD> EMPLOYEE_TRAVEL_ABROAD { get; set; }

        public virtual DbSet<WATER_BILL> WATER_BILL { get; set; }

        public virtual DbSet<WASTES> WASTES { get; set; }
    }
}

解釋程式碼
這段 C# 程式碼定義了一個使用 Entity Framework 的資料庫上下文 (DbContext) 來管理一組資料庫實體 (或稱為資料表) 的映射。程式碼中的每個 DbSet<T> 代表一個資料表，以下是詳細解釋：

1. ProductDBContext 類別:

  • 繼承自 DbContext，這是 Entity Framework 中的一個基礎類別，負責與資料庫進行互動。
  • 透過 base("name=ProductDBContext")，指定要使用的資料庫連接字串（ProductDBContext），這通常在配置檔案（如 Web.config）中定義。

2. DbSet<T>:

  • DbSet<T> 是 Entity Framework 用來表示資料庫中的表格的。每個 DbSet<T> 對應於一個資料庫表格。
  • 程式碼中定義了多個 DbSet，每個都代表一個不同的資料表。它們的名稱可以推測出大致用途，例如：
    • Products: 代表商品或產品的資料表。
    • ColdCoal: 代表冷媒（可能是與冷氣或製冷有關）的資料表。
    • FireExtin: 代表滅火器資料的表格。
    • VEHICLE_OIL: 代表車輛用油的資料表。
    • ELECTRICITY_BILL: 代表電費單的資料表。
    • tMember: 代表成員或用戶的資料表。
    • GHG_MST_COMMUTE: 可能與溫室氣體排放和員工通勤有關。
    • CAT_THREE_EMPLOYEE_COMMUTING: 可能與員工通勤的某些分類相關的資料表。
    • BRM_MST_EMISSION_FACTOR: 可能代表排放因子的主表。
    • TRIP_APPLICATION: 代表出差申請的資料表。
    • TAXI_APPLICATION: 代表計程車申請的資料表。
    • HIGH_SPEED_RAIL: 代表高鐵出行申請的資料表。
    • EMPLOYEE_TRAVEL_ABROAD: 代表員工出國旅遊申請的資料表。
    • WATER_BILL: 代表水費單的資料表。
    • WASTES: 代表廢棄物相關的資料表。

3. 註解:

  • 在程式碼中可以看到幾條註解，例如：
    • //20240716增加:冷媒欄位：這是用來記錄在 2024 年 7 月 16 日新增的冷媒資料表 (ColdCoal)。
    • 這樣的註解可以幫助開發者和維護者記錄某些表或欄位的新增日期和用途。

整體功能：

此程式碼負責建立與資料庫的連接，並提供對多個資料表（實體）的 CRUD（創建、讀取、更新、刪除）操作功能。每個 DbSet<T> 都對應一個資料庫表格，允許開發者透過 ProductDBContext 來操作這些表格中的資料。

這些表格的名稱可能與公司的業務或系統中的不同模組相關，如出差申請、交通、費用單、排放計算等。

Controllers裡面的Entities>

//Get:Home/Register
        [AllowAnonymous]
        public ActionResult Register()
        {
            return View();
        }
        //Post:Home/Register
        [AllowAnonymous]
        [HttpPost]
        public ActionResult Register(tMember pMember)
        {
            //若模型沒有通過驗證則顯示目前的View
            if (ModelState.IsValid == false)
            {
                return View();
            }
            // 依帳號取得會員並指定給member
            var member = _db.tMember
                .Where(m => m.fUserId == pMember.fUserId)
                .FirstOrDefault();
            //若member為null，表示會員未註冊
            if (member == null)
            {
                //將會員記錄新增到tMember資料表
                _db.tMember.Add(pMember);
                _db.SaveChanges();
                //執行Home控制器的Login動作方法
                return RedirectToAction("Login");
            }
            ViewBag.Message = "此帳號己有人使用，註冊失敗";
            return View();
        }

解釋程式碼
這段程式碼是一個 ASP.NET MVC 的控制器，用於處理用戶註冊流程。分為兩部分：一個 GET 方法和一個 POST 方法。

1. GET: Home/Register

[AllowAnonymous]
public ActionResult Register()
{
    return View();
}
  • 這是處理用戶請求顯示註冊頁面的 GET 方法。
  • AllowAnonymous：允許未經身份驗證的用戶訪問這個方法，表示即使用戶沒有登入也可以打開註冊頁面。
  • ActionResult Register()：這個方法返回一個視圖（View），通常是顯示註冊表單的頁面。

2. POST: Home/Register

[AllowAnonymous]
[HttpPost]
public ActionResult Register(tMember pMember)
{
    if (ModelState.IsValid == false)
    {
        return View();
    }

    var member = _db.tMember
        .Where(m => m.fUserId == pMember.fUserId)
        .FirstOrDefault();

    if (member == null)
    {
        _db.tMember.Add(pMember);
        _db.SaveChanges();
        return RedirectToAction("Login");
    }

    ViewBag.Message = "此帳號己有人使用，註冊失敗";
    return View();
}
  • AllowAnonymous 和 HttpPost：允許匿名訪問，並指定這是處理 POST 請求的方法，當用戶提交註冊表單時會執行這個方法。
  • Register(tMember pMember)：方法的參數 pMember 是一個 tMember 類型的物件，代表提交的註冊數據（如帳號、密碼等）。
  • ModelState.IsValid：這裡檢查提交的數據是否符合模型驗證規則。如果驗證失敗，返回註冊表單頁面，讓用戶修正輸入。
  • var member = _db.tMember.Where(...)：這段程式碼從資料庫查詢是否已經存在與提交帳號 (pMember.fUserId) 相同的會員。如果存在，member 會有值；如果沒有找到對應的會員，member 為 null。
  • 如果 member == null，表示用戶未註冊過，則將新用戶資料 (pMember) 新增到資料庫的 tMember 資料表中，並保存更改 (_db.SaveChanges())。
  • 然後透過 RedirectToAction("Login") 讓用戶跳轉到登入頁面。
  • 如果帳號已存在，使用 ViewBag.Message 顯示一個錯誤訊息「此帳號已有人使用，註冊失敗」，並重新顯示註冊頁面。

這段程式碼的主要作用是處理用戶註冊表單的提交，驗證資料並儲存到資料庫，避免重複註冊。

產生畫面View程式碼

@model WebApplication5.Models.tMember
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    ViewBag.Title = "Register";
}


<h2>作品-權限設定</h2>
<h3>註冊後，按登入測試</h3>



<h2>註冊</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.fUserId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fUserId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fUserId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fPwd, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fPwd, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fPwd, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fEmail, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fEmail, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fEmail, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="註冊" class="btn btn-default" />
                @ViewBag.Message
            </div>
        </div>
    </div>
}

解釋程式碼
這段程式碼是一個 ASP.NET MVC 應用程式的視圖（View），用來實現用戶註冊表單的功能。它使用 Razor 語法來混合 HTML 和 C# 代碼，並且通過模型 (Model) 來綁定數據。下面是對這段程式碼的解釋：

  1. 模型引用與布局設定：

    • @model WebApplication5.Models.tMember：指定了這個視圖所綁定的數據模型是 tMember。這個模型包含註冊表單中的字段，如用戶ID (fUserId)、密碼 (fPwd)、姓名 (fName) 和電子郵件 (fEmail)。
    • @{ Layout = "~/Views/Shared/_Layout.cshtml"; }：指定這個視圖的佈局文件，通常佈局文件包含標頭、頁腳等共用部分。

  2. 頁面標題與視圖包：

    • @{ ViewBag.Title = "Register"; }：設定這個頁面的標題為 "Register"。

  3. 表單開始：

    • @using (Html.BeginForm())：這行程式碼創建了一個 HTML <form> 標籤，表單會被提交到當前控制器的操作方法。
    • @Html.AntiForgeryToken()：加入一個隱藏的防偽令牌，用來防止跨站請求偽造 (CSRF) 攻擊。

  4. 表單結構：

    • 表單的每一個輸入字段都使用 Html.EditorFor() 來自動生成 HTML <input> 標籤。
    • @Html.LabelFor(model => model.fUserId)：生成與 fUserId 對應的 <label> 標籤。
    • @Html.EditorFor(model => model.fUserId)：生成與 fUserId 對應的 <input> 標籤，並使用 form-control 類來進行樣式設置。
    • @Html.ValidationMessageFor(model => model.fUserId)：生成顯示與 fUserId 相關的錯誤訊息的 <span> 標籤，並應用 text-danger 樣式來顯示紅色文字。

  5. 每個輸入字段的組合：

    • 包含用戶ID、密碼、姓名和電子郵件的輸入字段，這些都是透過表單收集的數據，並綁定到 tMember 模型的相應屬性。
    • 每個字段都有錯誤提示 (ValidationMessageFor) 來顯示驗證錯誤。

  6. 提交按鈕：

    • <input type="submit" value="註冊" class="btn btn-default" />：表單的提交按鈕，當用戶點擊後，表單將提交至服務器進行處理。

  7. 顯示信息：

    • @ViewBag.Message：用於顯示來自控制器的消息，可能用於顯示註冊結果（如成功或失敗的提示）。

總結：

  • 這是一個用於用戶註冊的表單視圖，表單通過模型 tMember 綁定各種輸入字段，並實現了基本的表單提交、錯誤驗證和防偽處理。

這裡太長，所以登入就明天說~/images/emoticon/emoticon01.gif


上一篇
多頁式網站_下
下一篇
權限設定:登入
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22088 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙